<template>
	<view class="page">
		<view class="nav">
			<uni-icons type="back" size="24" @click="goBack"></uni-icons>
			<text class="nav-title">{{ friendName }}</text>
			<view style="width:24px"></view>
		</view>

		<scroll-view scroll-y class="messages" :scroll-into-view="scrollIntoId">
			<view v-for="m in msgs" :key="m.id" :id="m.id" class="row" :class="{ me: m.from === selfId }">
				<image class="avatar" :src="m.from === selfId ? selfAvatarUrl : friendAvatarUrl" mode="aspectFill" @error="onImgError(m.from === selfId)"></image>
				<view class="bubble">{{ m.content }}</view>
			</view>
			<view :id="endAnchorId"></view>
		</scroll-view>

		<view class="input-bar">
			<uni-easyinput v-model="text" placeholder="说点什么..." :clearable="true" @confirm="send" confirm-type="send"></uni-easyinput>
			<button class="send-btn" type="primary" @click="send">发送</button>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { selfUser, getConversation, sendMessage, clearUnread, findFriendById } from '@/utils/chatStore.js'

const friendId = ref('')
const friendName = ref('')
const friendAvatarUrl = ref('')
const msgs = ref([])
const text = ref('')
const selfId = computed(() => selfUser.value.id)
const selfAvatarUrl = ref('/static/logo.png')
const endAnchorId = 'end_anchor'
const scrollIntoId = ref(endAnchorId)

onLoad((query) => {
	friendId.value = query?.fid || ''
	// 优先从 store 取头像与昵称
	const friend = findFriendById(friendId.value)
	friendName.value = friend?.name || decodeURIComponent(query?.name || '')
	friendAvatarUrl.value = friend?.avatar || decodeURIComponent(query?.avatar || '') || '/static/logo.png'
	selfAvatarUrl.value = (selfUser.value && selfUser.value.avatar) ? selfUser.value.avatar : '/static/logo.png'
	const conv = getConversation(friendId.value)
	msgs.value = conv.messages
	clearUnread(friendId.value)
	nextTick(() => { scrollIntoId.value = endAnchorId })
})

function goBack() {
	uni.navigateBack()
}

function send() {
	const content = (text.value || '').trim()
	if (!content) return
	const msg = sendMessage(friendId.value, content)
	text.value = ''
	nextTick(() => { scrollIntoId.value = msg.id })
}

function onImgError(isSelf) {
	if (isSelf) {
		selfAvatarUrl.value = '/static/logo.png'
	} else {
		friendAvatarUrl.value = '/static/logo.png'
	}
}
</script>

<style scoped lang="scss">
.page { background: #f5f6f7; height: 100vh; display: flex; flex-direction: column; }
.nav {
	height: 88rpx; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24rpx; border-bottom: 1px solid #eee;
}
.nav-title { font-size: 32rpx; font-weight: 600; }
.messages { flex: 1; padding: 24rpx 36rpx 24rpx 24rpx; }
.row { display: flex; align-items: flex-end; margin-bottom: 18rpx; }
.row.me { flex-direction: row-reverse; padding-right: 20rpx; }
.avatar { width: 64rpx; height: 64rpx; border-radius: 50%; margin: 0 6rpx; }
.row.me .avatar { margin-right: 18rpx; }
.bubble {
	max-width: 520rpx; padding: 16rpx 20rpx; border-radius: 16rpx; margin: 0 16rpx; background: #fff; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}
.row.me .bubble { background: #dbeafe; }
.input-bar { display: flex; gap: 12rpx; padding: 12rpx; border-top: 1px solid #eee; background: #fff; }
.send-btn { flex: 0 0 auto; }
</style>


